<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 文字环绕  - float + 左右结构    报纸  - 不规则环绕  */
        .box {
            width: 500px;
        }

        .shape {
            /* 颜色函数 + url + padding-box / border-/padding-  + 圆形/... */
            float: left;
            width: 200px;
            height: 300px;
            background-color: currentColor;
            shape-outside: url(birds.png);
            -webkit-mask: url(birds.png) no-repeat;
            mask: url(./birds.png) no-repeat;
            color: #cd0000;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="shape"></span>
        <p>
            在CSS Shapes布局问世之前，文字像杂志一样的任意形状的排版几乎是不可能的，一直都是用网格、盒子和直线构造。

            CSS Shapes允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是任意的图像和多彩的渐变。

            例如这里，使用半透明图像的 url 来定义形状，这样文本就会自动环绕它。重要的是要注意图像使用必须要兼容
            CORS（不要跨域，或者服务器设置'Access-Control-Allow-Origin'），否则会出错，而没有环绕效果。</p>
    </div>

</body>

</html>
